<template>
  <h1>计算属性</h1>

  <div>- 计算属性用于对元素的一些属性进行计算，如数组的长度等</div>
  <div>- 我们可以将计算数组长度等计算方法，放到 methods
    中，形成一个函数来调用，但每次调用都会有一定的开销，此时可以将这些方法放到计算属性中计算，计算属性的计算具有缓存机制，只要元素没有发生变化，那么此后的多次使用该方法，都会使用缓存，而不是重新计算
  </div>
  <div>- 当然，我们也可以直接将计算逻辑写在双花括号中，但对于更长的计算逻辑，这么写显然不合理，很复杂，可读性也很差</div>

  <p style="font-family: kaiti,serif">以下示例计算数组的长度，如果数组长度为 3，则显示 yes，反之显示 no</p>
  <!--  调用计算属性中的方法不需要加括号-->
  <p>{{ getIfThree }}</p>
</template>

<script>
export default {
  data() {
    return {
      quotes: ['予力众生，成就不凡。', '山川同一色，浩若涉大荒。', '你不一定逆风翻盘，但请一定向阳而生。'],
    }
  },
  computed: {
    getIfThree() {
      return this.quotes.length === 3 ? "yes" : "no";
    }
  }
}
</script>
